import React = require("react");
import { component } from "components/common/component";
import { BaseComponent } from "components/common/base-component";
import { MemberService } from "mobile/services/memberService";
import { ImageService } from "maishu-services-sdk";
import { generateImageBase64, renderImage } from "maishu-ui-toolkit";
import { Application } from "maishu-chitu-react";

interface Props {
    app: Application
}

interface State {
    store: Store
}

@component({
    displayName: "店铺信息", icon: "icon-edit",
    introduce: "显示店铺相关信息，包括店铺图标，店铺名称，商品数量，订单数量等等，一般放置在首页顶部。"
})
export class SummaryHeader extends BaseComponent<Props, State> {
    memberService: MemberService;
    imageService: ImageService;

    constructor(props) {
        super(props);

        this.memberService = this.createService(MemberService);
        this.imageService = this.createService(ImageService);
        this.memberService.store().then(store => {
            this.setState({ store });
        })
    }
    render() {

        if (!this.state) {
            return null;
        }

        let { store } = this.state;
        store = store || {} as any;
        let src: string;
        if (store.ImagePath) {
            src = this.imageService.imageSource(store.ImagePath, 100, 100)
        }
        else {
            src = generateImageBase64(100, 100, store.Name || "");
        }

        return <div className="summaryHeader-control">
            <div key={10} className="headerImage pull-left">
                <img src={src} ref={(e: HTMLImageElement) => e ? renderImage(e, { imageSize: { width: 100, height: 100 } }) : null} />
            </div>
            <div key={20} className="headerContent">
                <h4 className="title">{store.Name}</h4>
                <div className="item">
                    <div className="number">0</div>
                    <div className="text">全部商品</div>
                </div>
                <div className="item">
                    <div className="number">0</div>
                    <div className="text">上新商品</div>
                </div>
                <div className="item"
                    onClick={() => this.props.app.forward("shopping/orderList")}>
                    <div className="number">
                        <i className="icon-user" />
                    </div>
                    <div className="text">我的订单</div>
                </div>
                <div className="clearfix"></div>
            </div>
        </div>
    }
}